<template>
<div class="goodsinfo-container">
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball" ></div>
    </transition>
  
 
    <!-- 商品轮播图区域 -->

    
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					<swiper :lunbotuList="lunbotu" :isfull="true"></swiper>
					</div>
				</div>
			</div>

    <!-- 商品购买区域 -->
      <div class="mui-card">
				<div class="mui-card-header">{{goodsinfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
             市场价： <del>￥{{goodsinfo.market_price}}</del>&nbsp;&nbsp;
             销售价： <span class="now_price">￥{{goodsinfo.sell_price}}</span>
              
            </p>
            <p>购买数量：<numbox @getcount="getSelectedCount" :max="goodsinfo.stock_quantity"> </numbox></p>
            <p>
              <mt-button type="primary" size="small">立即购买</mt-button>
              <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
            </p>

				</div>
			</div>
    </div>
    <!-- 商品参数区域 -->

     <div class="mui-card">
			<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					<p>商品货号：{{ goodsinfo.goods_no }}</p>
          <p>库存情况：{{ goodsinfo.stock_quantity }}件</p>
          <p>上架时间：{{ goodsinfo.add_time | dateFormat }}</p>
					</div>
				</div>
				<div class="mui-card-footer">
            <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
        </div>
			</div>

      </div>

</template>

<script>
//导入轮播图组件
import swiper from "../subcompoments/swiper.vue"
//导入数字选择框组件
import numbox from "../subcompoments/goodsinfo_numbox.vue"
export default {
    data (){
      return{
         id:this.$route.params.id,
         ballFlag:false, // 控制小球的隐藏和显示的标识符
         selectedCount:1, //保存用户选中的商品数量，默认为1个
      lunbotus:[
           {
             id:1,
             imgurl:[
               {
                 img_src:require("../../images/lun1-1.jpg")
               },
                 {
                 img_src:require("../../images/lun1-2.jpg")
               },
                 {
                 img_src:require("../../images/lun1-3.jpg")
               },
             ]
           
           
           },

                   {
             id:2,
             imgurl:[
               {
                 img_src:require("../../images/lun2-1.jpg")
               },
                 {
                 img_src:require("../../images/lun2-2.jpg")
               },
                 {
                 img_src:require("../../images/lun2-3.jpg")
               },
             ]
           
           },

                   {
             id:3,
             imgurl:[
               {
                 img_src:require("../../images/lun3-1.jpg")
               },
                 {
                 img_src:require("../../images/lun3-2.jpg")
               },
                 {
                 img_src:require("../../images/lun3-3.jpg")
               },
             ]
           
           
           },
        {
             id:4,
             imgurl:[
               {
                 img_src:require("../../images/lun4-1.jpg")
               },
                 {
                 img_src:require("../../images/lun4-2.jpg")
               },
                 {
                 img_src:require("../../images/lun4-3.jpg")
               },
             ]
           
           
           },
        {
             id:5,
             imgurl:[
               {
                 img_src:require("../../images/lun5-1.jpg")
               },
                 {
                 img_src:require("../../images/lun5-2.jpg")
               },
            
             ]
           
           
           },

           {
             id:6,
             imgurl:[
               {
                 img_src:require("../../images/lun6-1.jpg")
               },
                 {
                 img_src:require("../../images/lun6-2.jpg")
               },
            
             ]
           
           
           },
    ],
         lunbotu: [],
          goodsinfo:{},
              goodsInfos: [
                {
                    id:1,
                    title:"波西米亚性感娃娃",
                  img_src:require("../../images/goods1-1.jpg"),
                    market_price:990,
                    sell_price:1333,
                    stock_quantity:100,
                    goods_no:2352526,
                    add_time:"2019-08-12 08:09:23",

            
                },
                    {
                    id:2,    
                    title:"喷血热辣娃娃",
                    img_src:require("../../images/goods1-2.jpg"),
                    market_price:290,
                    sell_price:933,
                    stock_quantity:50,
                      goods_no:2352242526,
                    add_time:"2019-04-12 03:22:23",
                
                },

                    {
                    id:3,
                    title:"小清新娃娃",
                    img_src:require("../../images/goods1-3.jpg"),
                    market_price:440,
                    sell_price:733,
                    stock_quantity:300,
                      goods_no:3452452526,
                    add_time:"2019-09-22 08:09:23",
                
                },

                    {
                    id:4,    
                    title:"明星景甜同款娃娃",
                   img_src:require("../../images/goods1-4.jpg"),
                    market_price:1110,
                    sell_price:1433,
                    stock_quantity:220,
                      goods_no:23545676,
                    add_time:"2019-04-21 12:22:23",
                
                },

                    {
                    id:5,     
                    title:"让你欲罢不能的娃娃",
                    img_src:require("../../images/goods1-5.jpg"),
                    market_price:8890,
                    sell_price:15333,
                    stock_quantity:100,
                      goods_no:23535636526,
                    add_time:"2019-11-12 15:09:23",
                
                },

                    {
                    id:6,
                    title:"月草月紧的娃娃",
                    img_src:require("../../images/goods1-6.jpg"),
                    market_price:3990,
                    sell_price :6333,
                    stock_quantity:300,
                      goods_no:44452352526,
                    add_time:"2019-11-12 18:19:43",
                
                },

                    {
                    id:7,    
                    title:"自带震动高潮迭起娃娃",
                    img_src:require("../../images/goods1-7.jpg"),
                    market_price:8990,
                    sell_price:22243,
                    stock_quantity:500,
                      goods_no:2352526,
                    add_time:"2019-07-12 18:19:23",
                
                },
                    {
                    id:8,    
                    title:"鸡巴硬邦邦娃娃",
                  img_src:require("../../images/goods1-8.jpg"),
                    market_price:66031,
                    sell_price:66633,
                    stock_quantity:40,
                      goods_no:2245562352526,
                    add_time:"2019-05-23 21:44:23",
                
                },
            ],
      }
     
    },
    created(){
      this.getLunbotu();
      this.getGoodsInfo();
    },
    methods:{
      // getLunbotu(){
      //   this.$http.get("api/gethumlmages/" + this.id).then(result =>{
      //     if (result.body.status === 0){
        // 先循环轮播图数组的每一项，为 item 添加 img 属性，因为 轮播图 组件中，只认识 item.img， 不认识 item.src
          // result.body.message.forEach(item => {
          //   item.img = item.src;
          // });
      //       this.lunbotu = result.body.message;
      //     }
      //   })
      // }
//  getGoodsInfo() {
//       // 获取商品的信息
//       this.$http.get("api/goods/getinfo/" + this.id).then(result => {
//         if (result.body.status === 0) {
//           this.goodsinfo = result.body.message[0];
//         }
//       });
//     },
      getLunbotu(){
        for (let val of this.lunbotus){
          if (val.id == this.id){
            this.lunbotu = val.imgurl;
          }
        }
      },

      getGoodsInfo(){
        for(let val of this.goodsInfos){
          if (val.id == this.id){
            this.goodsinfo = val
          }
        }
      },
      goDesc(id){
          // 点击使用编程式导航跳转到 图文介绍页面
      this.$router.push({ name: "goodsdesc", params: { id } });
      },
          goComment(id) {
      // 点击跳转到 评论页面
      this.$router.push({ name: "goodscomment", params: { id } });
    },
      addToShopCar() {
      // 添加到购物车
      this.ballFlag = !this.ballFlag;
      //制作一个对象传递给中间仓储以达到让其他组件访问的目的，解决父子组件传值的麻烦调用以及非嵌套组件传值的问题
      var goodsinfo = {
        id:this.id,
        count:this.selectedCount,
        price:this.goodsinfo.sell_price,
        selected:true,
        thumb_path:this.goodsinfo.img_src,
        title:this.goodsinfo.title,
      };

      //调用store中的mutations 将商品的数据加入vuex的中间仓储中
      this.$store.commit("addToCar",goodsinfo)
    },
     beforeEnter(el) {
      el.style.transform = "translate(0, 0)";
    },
    enter(el,done){
      el.offsetWidth;
      // el.style.transform = "translate(93px,230px)";
      // el.style.transition ="all 1s cubic-bezier(.4,-0.3,1,.68)";
       // 小球动画优化思路：
      // 1. 先分析导致 动画 不准确的 本质原因： 我们把 小球 最终 位移到的 位置，已经局限在了某一分辨率下的 滚动条未滚动的情况下；
      // 2. 只要分辨率和 测试的时候不一样，或者 滚动条有一定的滚动距离之后， 问题就出现了；
      // 3. 因此，我们经过分析，得到结论： 不能把 位置的 横纵坐标 直接写死了，而是应该 根据不同情况，动态计算这个坐标值；
      // 4. 经过分析，得出解题思路： 先得到 徽标的 横纵 坐标，再得到 小球的 横纵坐标，然后 让 y 值 求差， x 值也求 差，得到 的结果，就是横纵坐标要位移的距离
      // 5. 如何 获取 徽标和小球的 位置？？？   domObject.getBoundingClientRect()

      // 获取小球的 在页面中的位置
      const ballPosition = this.$refs.ball.getBoundingClientRect();
      //获取 徽标在页面中的位置
      
      const badgePosition = document.getElementById("badge").getBoundingClientRect();
      //获取小球的位移距离
      const xDist = badgePosition.left - ballPosition.left;
      const yDist = badgePosition.top - ballPosition.top;
      //指定小球在出现过程中的位移终点以及位移时间和时间区间中的速度
      el.style.transform = `translate(${xDist}px,${yDist}px)`;
      el.style.transition = "all 0.7s cubic-bezier(.4,-0.3,1,.68)";
      //最终使得小球消失
      done();
    },
 
    afterEnter(el){
      this.ballFlag = !this.ballFlag;
    },

    getSelectedCount(count){
      //自组件选中数量传递给父组件的时候把子组件的更新值保存到data上。
      this.selectedCount = count;
    

    }

  },

    components:{
      swiper:swiper,
      numbox:numbox,
    }



}
</script>


<style lang="scss" scoped>
.goodsinfo-container{
  background-color: #ccc;
  overflow: hidden;

  .now_price{
    color:red;
    font-size: 16px;
    font-weight: bold;
  }

  .mui-card-footer{
    display: block;
    button{
      margin:15px 0;
    }
  }
  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 99;
    top: 390px;
    left: 146px;
  }
}
</style>
